<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>IFE-2016 1.6</title>
    <link rel="stylesheet" type="text/css" href="css/style1.6.css">
</head>
<body>
    <div id="container">
        <header>
            <div class="logo">
                <p>ife.baidu.com</p>
            </div>
            <p class="date">2016.03</p>
        </header>
        <section class="top">
            <div class="head_igure">
                <img src="img/love.jpg">
                <div class="imgleft"></div>
                <div class="imgright"></div>
            </div>
            <div class="t_sidebar">
                <p>about</p>
                <p>technologe</p>
                <p>About technologe about technologe </br>about technologe</p>
                <p>700</p>
                <p>3.2</p>
                <div class="t_sidebar_css">
                    <p>css</p>
                    <p>cssssscsssscss</p>
                </div>
            </div>
        </section>
        <section class="mid">
            <div class="what">
                <p class="what_title">What</p>
                <p class="wwh_content">前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前</P>
            </div>
            <div class="when">
                <p class="when_title">When</p>
                <p class="wwh_content">前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p>
            </div>
            <div class="how">
                <p class="how_title">How</p>
                <p class="wwh_content">前端前端前端前端</p>
                <p class="wwh_content">前端前端前端前端前端前</p>
                <p class="wwh_content">前端前端前端前端</p>
                <p class="w3_one">What---------- <span>40%</span></p>
                <p class="w3">What---------- <span>30%</span></p>
                <p class="w3">What---------- <span>30%</span></p>
            </div>
        </section>
        <section class="main">
            <div class="main_r">
                <div class="main_r_pic">
                    <img src="img/pic2.png">
                    <div class="main_r_pic_title">
                        <p>前端技术<span>前端技术前端技术</span></p>
                    </div>
                </div>
                <div class="left_foot">
                    <p class="lf_head">
                        <span class="triangle"></span>
                        <span class="list_title">前端前端前端前端前端前端 .....................</span>
                        <span class="list_item">前端</span>
                        <span class="triangle"></span>
                        <span class="list_title">前端前端前端前端前端前端 .....................</span>
                        <span class="list_item">前端</span>
                        <span class="triangle"></span>
                        <span class="list_title">前端前端前端前端前端前端 .....................</span>
                        <span class="list_item">前端</span>
                    </p>
                    <div class="lf_left"></div>
                    <div class="lf_right">
                        <span class="mark_one">“</span>
                        <p> world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world </p>
                        <span class="mark_two">”</span>
                    </div>
                </div>
            </div>
            <div class="main_l">
                <div class="left_title">
                    <p><span>THE</span> TECHNOLOGE OF FRONT</p>
                    <p>前端技术领域</p>
                </div>
                <div class="left_content">
                    <p><span>前</span>前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端<img src="img/code.png">前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端。
                    </p>
                    <p>前端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p>
                    <p>前端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p>
                </div>
            </div>
        </section>
        <section class="footer">
            <p>ife.baidu.com</p>
        </section>
    </div>
</body>
</html>